<template>
  <view class="channel">
		<u-navbar placeholder >
			<view class="cha" @tap="closeChannel" slot="left">
			<i class="iconfont icon-cha"></i>
			</view>
		</u-navbar>
   

    <view class="my-channel">
      <view class="left">
        <view class="title">我的频道</view>
        <view class="desc">{{ editStatus == true ? "" : "点击进入频道" }}</view>
      </view>
      <view class="edit">
        <u-button
          type="primary"
          :plain="true"
          shape="circle"
          size="small"
          @tap="editStatus = !editStatus"
          >{{ editStatus == true ? "完成" : "编辑" }}</u-button
        >
      </view>
    </view>

    <view class="channel-item">
      <u-grid :border="false" col="4">
        <u-grid-item
          v-for="(listItem, listIndex) in list"
          :key="listIndex"
          @click="click(listItem)"
        >
          <view class="item">
            <view class="grid-text">{{ listItem.title }} </view>
            <view class="cha" v-show="editStatus">
              <i class="iconfont icon-cha"></i>
            </view>
          </view>
        </u-grid-item>
      </u-grid>
    </view>

		<view class="tj-channel">
      <view class="left">
        <view class="title">推进频道</view>
        <view class="desc">点击进入频道</view>
      </view>
    </view>

    <view class="channel-item tj-channel-item">
      <u-grid :border="false" col="4">
        <u-grid-item
          v-for="(listItem, listIndex) in list"
          :key="listIndex"
          @click="click(listItem)"
        >
          <view class="item">
						<view class="jiahao">
              <i class="iconfont icon-jiahao"></i>
            </view>
            <view class="grid-text">{{ listItem.title }} </view>
           
          </view>
        </u-grid-item>
      </u-grid>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      editStatus: false,
      list: [
        {
          name: "photo",
          title: "图片",
        },
        {
          name: "lock",
          title: "锁头",
        },
        {
          name: "star",
          title: "星星",
        },
        {
          name: "hourglass",
          title: "沙漏",
        },
        {
          name: "home",
          title: "首页",
        },
        {
          name: "star",
          title: "音量",
        },
      ],
    };
  },
  methods: {
    click(item) {
      console.log(item);
    },
		closeChannel(){
			this.$emit('close')
		}
  },
};
</script>

<style scoped lang="scss">
.channel {
  font-size: 18px;
  height: 100vh;
  padding: 10px 10px;
  box-sizing: border-box;
  .cha {
    margin: 5px 0px 10px 0px;
    .icon-cha {
      font-size: 20px;
    }
  }
}
.tj-channel{
	margin-top: 30px;
}
.my-channel,.tj-channel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  .left {
    display: flex;
    align-items: flex-end;
    .desc {
      margin-left: 10px;
      font-size: 14px;
      color: #bcbcbc;
    }
  }
}
.tj-channel-item{
	/deep/.u-grid-item{

	}
	.item{
		display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
		align-items: center;
		padding: 6px 15px !important;
	}
	.jiahao{
			.icon-jiahao{

			}
		}
}
.channel-item {
  .item {
    position: relative;
    padding: 6px 23px;
    background-color: #f8f2f2;
    margin-bottom: 10px;
    border-radius: 3px;
		.grid-text{
			font-size: 16px;
		}
    .cha {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      width: 18px;
      height: 18px;
      top: -25%;
      right: -10%;
      margin: 0;
      border-radius: 50%;
      background-color: #d8d0d0;
      .icon-cha {
        color: #fff;
        font-size: 7px;
      }
    }
  }
}
</style>
